<script setup lang="ts">
import { suffixUnit } from "@/utils";
import Taro from "@tarojs/taro";
import BySquare from "./BySquare.vue";

const {
  preview,
  size = 140,
  urls = [],
  url,
} = defineProps<{
  url?: string;
  size?: number | string;
  preview?: boolean;
  urls?: string[];

  delete?: boolean;

  // 是否显示长按菜单
  showmenu?: boolean;

  circle?: boolean;
}>();

defineEmits<{
  delete: [];
}>();

const handlePreview = () => {
  if (preview) {
    Taro.previewImage({
      urls: urls || [url],
      current: url,
    });
  }
};
</script>

<template>
  <view
        class="relative overflow-hidden"
        :class="[circle ? 'rounded-full' : 'rounded-md']"
        :style="`width:${suffixUnit(size)};height:${suffixUnit(size)}`">
    <image class="w-full h-full" :src="url" @tap="handlePreview" />

    <BySquare
              v-if="delete"
              :size="40"
              icon="Delete"
              icon-size="20"
              class="absolute top-1 right-1 z-10 bg-light text-dark"
              @tap="$emit('delete')" />
  </view>
</template>
